<template>
    <div class="wrapper">
        <!-- 头部 -->
        <page-header-com>
            <template #left
                ><p @click="$router.push('/home/shoppingCart')">
                    &lt;
                </p></template
            >
            <template #default>结算失败</template>
        </page-header-com>

        <!-- 主体内容区 -->
        <div class="center">
            <img src="../assets/images/fail.png" alt="" />
            <div class="tip">
                结算异常 <br />
                请尝试重新结算
            </div>
            <div class="pay_num">3573524364657345</div>
        </div>
        <button class="again" @click="again">重新结算</button>
    </div>
</template>

<script>
export default {
    name: "paySuccessView",
    methods: {
        again() {
            console.log("重新结算");
        },
    },
};
</script>

<style lang="scss" scoped>
.wrapper {
    height: 100vh;
    background-color: #eae9e5;
}
.center {
    text-align: center;
    img {
        margin: 16vw 0 2.133vw 0;
        width: 53.333vw;
        height: 53.333vw;
    }
    .tip {
        color: #999;
        font-size: 3.733vw;
    }
    .pay_num {
        color: #d1082a;
        font-size: 4.267vw;
    }
}
button {
    display: block;
    margin: 0 auto;
    width: 78vw;
    height: 11.2vw;
    border-radius: 5.6vw;
    border: 0;
}
.again {
    margin-top: 48.533vw;
    color: #fff;
    background-color: #921b31;
}
</style>